<template>
  <!-- 
      插槽的分类：
        1. 默认插槽：没有起名字，默认名字叫defalut
        2. 具名插槽：可以自定义名字，通过name自定义名字，可以实现定向分发
           <slot name="content"></slot>

           <template #content>

           </template>

      作用域插槽：插槽可以携带参数的语法，插槽上其实可以携带一定的参数，给组件使用者提供便利
      关于携带的参数，使用组件时，想用就用，不用也可以
        1. 给插槽，添加属性的方式传值
           <slot title="abc" desc="123"></slot>

        2. 所有的被添加的属性，会被统一收集到一个对象中
           { title: 'abc', desc: '123' }

        3. 所有的组件使用者，使用插槽时，就可以通过 = 接收已经提供好的参数
           <template v-slot:header="obj">

      之所以叫作用域插槽，插槽的传值，只能在当前template范围内使用
    -->

  <!-- 1.在父组件中的子组件的双标签中间加上要传过去的结构 -->
  <!-- 高度自定义要传到子组件中的结构 -->
  <div>
    <!-- <HmSlot>
      template标签就是插槽传参的容器
      <template v-slot:content>
        <input type="text" placeholder="请输入正确的内容" />
      </template>

      template如果不指定插槽名称，那么就会默认为default
      <template #username>
        <div>我是用户名1</div>
      </template>

      <template>
        <div>我是用户名2</div>
      </template>
    </HmSlot> -->

    <!-- 父组件中的结构想要去使用子组件中的数据 -->
    <!-- 父组件要使用子组件内的数据，然后经过编译后将结构再传给子组件 -->
    <HmSlot>
      <!-- #content='接受到的参数对象' 名字随你起, 一般slotScope -->
      <template #content="slotScope">
        <h2>{{ slotScope }}</h2>
        <h2>{{ slotScope.title }}</h2>
        <h2>{{ slotScope.msg }}</h2>
        <h2 v-for="item in slotScope.arr" :key="item">
          {{ item }}
        </h2>
      </template>

      <template #option="slotScope">
        <button>{{ slotScope.yes }}</button>
        <button>{{ slotScope.no }}</button>
      </template>
    </HmSlot>
  </div>
</template>
 
<script>
import HmSlot from './components/HmSlot.vue'

export default {
  components: {
    HmSlot
  }
}
</script>

<style scoped>
</style>